<template>
  <aside class="w1 tab-content">
    <Card title="实时负荷"
      :dis-hover="true"
      :bordered="false">
      <div slot="extra">
        <Button @click="handleOnOpen"
          type="primary"
          shape="circle"
          icon="ios-search">
        </Button>
      </div>
      <div class="card-body">
        <Drawer class="ivu-drawer-top"
          :title="companyInfo.name"
          width="300"
          v-model="visible"
          :mask="false">
          <SearchBar v-if="showSearch"
            :companyId="companyId"
            @change="handleChange"
            @download="handleDownload"
            :hideExport="true" />
        </Drawer>
        <Table border
          :columns="columns"
          :data="tableData"
          :loading="loading">
        </Table>
        <Page style="margin-top:16px;"
          :total="pageInfo.total"
          :page-size="20"
          @on-change="handlePageChange"
          :current="pageInfo.current" />
      </div>
    </Card>
  </aside>
</template>
<script>
import SearchBar from '../SearchBar'
import mixin from './mixin'
import {
  getNxOnTimeFuHe,
  getCompanyDetailByCompanyId,
  exportNxDayLoad
} from '@/api'
import Download from '@/utils/download'
import utils from '@/utils/utils'
export default {
  mixins: [mixin],
  components: { SearchBar },
  mounted() {
    this.fetchCompanyInfo()
    this.visible = true
    this.showSearch = true
  },
  data() {
    const vm = this
    return {
      columns: [
        {
          title: '分路名称',
          align: 'center',
          render(h, params) {
            const {
              row: { deviceName, deviceNo }
            } = params
            return h(
              'button',
              {
                class: {
                  'link-button': true
                },
                style: {
                  color: '#515a6e'
                },
                on: {
                  click: () => {
                    vm.$router.push(
                      `/analysis/ontime/load/${deviceNo}/${deviceName}`
                    )
                  }
                }
              },
              deviceName
            )
          }
        },
        {
          title: '有功负荷(kW)',
          align: 'center',
          children: [
            {
              title: '总',
              align: 'center',
              key: '19'
            },
            {
              title: 'A相',
              align: 'center',
              key: '16'
            },
            {
              title: 'B相',
              align: 'center',
              key: '17'
            },
            {
              title: 'C相',
              align: 'center',
              key: '18'
            }
          ]
        },
        {
          title: '无功负荷(kvar)',
          align: 'center',
          children: [
            {
              title: '总',
              align: 'center',
              key: '29'
            },
            {
              title: 'A相',
              align: 'center',
              key: '26'
            },
            {
              title: 'B相',
              align: 'center',
              key: '27'
            },
            {
              title: 'C相',
              align: 'center',
              key: '28'
            }
          ]
        },
        {
          title: '抄表时间',
          align: 'center',
          key: 'readTime'
        }
      ],
      tableData: [],
      visible: false,
      companyInfo: { name: '设备列表' },
      pageInfo: { total: 0, current: 1 },
      searchData: {},
      loading: false
    }
  },

  methods: {
    initData() {
      const vm = this
      vm.loading = true
      const data = { ...vm.searchData }
      const params = {
        companyId: vm.companyId,
        groupId: data.groupId,
        deviceNo: data.deviceNo,
        page: vm.pageInfo.current
      }
      getNxOnTimeFuHe(params).then(res => {
        if (res.code === 200 && res.data) {
          vm.tableData = res.data.list
          vm.pageInfo.total = res.data.total
        } else {
          vm.tableData = []
          vm.pageInfo.total = 0
        }
        vm.loading = false
      })
    },

    handlePageChange(index) {
      this.pageInfo.current = index
      this.initData()
    },

    handleChange(data) {
      this.pageInfo.current = 1
      this.searchData = data
      this.initData()
    },

    handleOnOpen() {
      this.visible = true
    },

    handleDownload() {
      const vm = this
      const searchData = utils.filterBlankValue(vm.searchData)
      const params = {
        ...searchData,
        date: vm.moment().format('YYYY-MM-DD')
      }
      const url = exportNxDayLoad(params)
      const download = new Download(url)
      vm.$Notice.open({
        title: '下载提示',
        desc: '文件正在下载，请至下载查看进度'
      })
      download.destory()
    },

    async fetchCompanyInfo() {
      const vm = this
      const companyId = vm.companyId
      const { data } = await getCompanyDetailByCompanyId(companyId)
      if (data) {
        this.companyInfo = data
      }
    }
  }
}
</script>
